<template>
  <el-main>
    <el-row class="search1">
      <el-col :span="3">
        <el-input v-model="input" placeholder="请输入姓名/档案号" @change="searchenter"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" class="searchbtn" @click="searchbtn">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table :data="tableData" stripe style="width: 100%"
          :header-cell-style="{ background: 'rgb(39,49,70)', color: '#ffffff' }">
          <el-table-column prop="fileNumber" label="档案号" width="180">
          </el-table-column>
          <el-table-column prop="memberName" label="姓名" width="180">
          </el-table-column>

          <el-table-column prop="memberAge" label="年龄"> </el-table-column>
          <el-table-column prop="memberSex" label="性别"> </el-table-column>
          <el-table-column prop="" label="状态"> </el-table-column>
          <el-table-column prop="classification" label="人群分类">
          </el-table-column>
          <el-table-column prop="doctor" label="健康管理师"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="ConfirmClass(scope.$index, scope.row)">确认分类</el-button>
              <el-button size="mini" type="danger" @click="deleteclass(scope.$index, scope.row)">清除分类</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row class="page">
      <el-col :span="8" :offset="14">
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-size="limit" :page-sizes="[5, 10, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
            :total="Number(count)">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 分类模态框 -->
    <el-dialog title="确认分类" :visible.sync="dialogVisible" width="35%">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-row class="information">
            <el-col :span="2" :offset="1">档案号：</el-col>
            <el-col :span="8" v-text="row.fileNumber"></el-col>
            <el-col :span="2" :offset="1">姓名：</el-col>
            <el-col :span="8" v-text="row.memberName"></el-col>
          </el-row>
          <el-row class="information">
            <el-col :span="2" :offset="1">性别：</el-col>
            <el-col :span="8" v-text="row.memberSex"></el-col>
            <el-col :span="2" :offset="1">年龄：</el-col>
            <el-col :span="8" v-text="row.memberAge"></el-col>
          </el-row>
          <el-row class="information">
            <el-col :span="2" :offset="1">疾病史：</el-col>
            <el-col :span="18" v-text="row.bingshi"></el-col>
          </el-row>
          <el-row class="information">
            <el-col :span="2" :offset="1">遗传史：</el-col>
            <el-col :span="18" v-text="row.jiazushi"></el-col>
          </el-row>
          <el-row class="information">
            <el-col :span="2" :offset="1">过敏史：</el-col>
            <el-col :span="18" v-text="row.guominshi"></el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="确认分类" name="second">
          <el-row class="information">
            <el-col :span="4" :offset="1">确认分类 ：</el-col>
            <el-col :span="18">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="脂肪肝"></el-checkbox>
                <el-checkbox label="高血压"></el-checkbox>
                <el-checkbox label="高血糖"></el-checkbox>
                <el-checkbox label="高血脂"></el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ConfirmClassbtn">确 定</el-button>
      </span>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      checkList: [],

      row: {},
      activeName: "first",
      dialogVisible: false,
      limit: 5, //表格每页显示的条数
      activeName: "first",
      Classified: "",
      dialogVisible: false,
      input: "",
      tableData: [],
      page: 1, //当前是第几页
      count: "",
    };
  },
  methods: {
    handleClick(tab, event) {
      // ////console.log(tab, event);
    },

    /**渲染列表 */
    memberClassifyList() {
      this.$axios({
        url: "/memberClassify/list",
        method: "post",
        data: { limit: this.limit, page: this.page },
      })
        .then((res) => {
          // ////console.log(res.count);
          this.tableData = res.data;
          this.count = res.count;
        })
        .catch((err) => { });
    },

    /**搜索 回车*/
    searchenter(val) {
      this.page = 1;
      // ////console.log(Number(val));
      this.input = val;

      this.searchname();
    },
    /**搜索 按钮 */
    searchbtn() {
      this.page = 1;
      // ////console.log(this.input);
      this.searchname();
    },
    /** 删除按钮 */
    deleteclass(index, row) {
      this.$confirm("此操作将永久清楚该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // ////console.log(index);
          ////console.log(row.id);
          this.$axios({
            url: "/memberClassify/delete",
            method: "get",
            params: { id: row.id },
          })
            .then((res) => {
              ////console.log(res);
              this.memberClassifyList();
            })
            .catch((err) => { });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    ConfirmClass(index, row) {
      this.activeName = "first";
      this.row = row;
      // ////console.log(row);
      this.dialogVisible = true;
      // ////console.log(row.classification);
      if (row.classification) {
        this.checkList = row.classification.split(",");
      } else {
        this.checkList = []
      }

    },
    ConfirmClassbtn() {
      let arrcheckList = [];
      for (let i = 0; i < this.checkList.length; i++) {
        if (this.checkList[i]) {
          arrcheckList.push(this.checkList[i]);
        }
      }
      // ////console.log(arrcheckList);
      // ////console.log(this.checkList);
      // ////console.log(this.row.id);
      this.$axios({
        url: "/memberClassify/classify",
        method: "post",
        data: { id: this.row.id, classifications: arrcheckList },
      }).then((res) => {
        // ////console.log(res);
        this.dialogVisible = false;
        this.memberClassifyList();
      });
    },
    handleSizeChange(val) {
      ////console.log(`每页 ${val} 条`);
      ////console.log(this.input);
      if (this.input) {
        this.limit = val;
        this.searchname();
      } else {
        this.limit = val;
        this.memberClassifyList();
        ////console.log(this.input);
      }
    },
    handleCurrentChange(val) {
      ////console.log(`当前页: ${val}`);
      //   ////console.log(this.input);
      if (this.input) {
        this.page = val;
        this.searchname();
      } else {
        this.page = val;
        this.memberClassifyList();
      }
    },
    /**搜索 */
    searchname() {
      if (Number(this.input)) {
        ////console.log(this.input.trim());
        this.$axios({
          url: "/memberClassify/list",
          method: "post",
          data: {
            fileNumber: this.input.trim(),
            page: this.page,
            limit: this.limit,
          },
        }).then((res) => {
          ////console.log(res);
          this.tableData = res.data;
          this.count = res.count;
        });
      } else {
        this.$axios({
          url: "/memberClassify/list",
          method: "post",
          data: {
            memberName: this.input.trim(),
            page: this.page,
            limit: this.limit,
          },
        }).then((res) => {
          ////console.log(res);
          this.tableData = res.data;
          this.count = res.count;
        });
      }
    },
  },
  created() {
    this.memberClassifyList();
  },
};
</script>

<style scoped>
.search1 {
  margin-bottom: 30px;
}

.searchbtn {
  margin-left: 30px;
}

.page {
  margin-top: 30px;
}

.block {
  font-size: 20px;
}

.information {
  margin-bottom: 30px;
}
</style>

